﻿@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100">
    <h2><DemoNavLink Link="GridSelection#MultipleSelectedDataRows" />Multiple Row Selection</h2>
    <p>
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.SelectionMode">SelectionMode</a> property to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridSelectionMode">DataGridSelectionMode.MultipleSelectedDataRows</a> to enable multiple selection in the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> component.
        To select a range of rows, users should hold down the <b>Shift</b> key and click the first and last rows in the range. To add/remove a row to/from selection, users should hold down the <b>Ctrl</b> key and click the row.
    </p>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.MultipleSelectedDataRows">MultipleSelectedDataRows</a> property to access/specify the selected items.
        To track selection changes in this mode, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.MultipleSelectedDataRowsChanged">MultipleSelectedDataRowsChanged</a> event or the two-way synchronization as demonstrated in this module.
    </p>
</div>

@if (DataSource == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row mw-1100 ml-md-0 mr-md-0 position-relative">
        <div class="col-md-8 pl-md-0">
            <div class="card border-0">
                <DxDataGrid Data="@DataSource"
                            SelectionMode="DataGridSelectionMode.MultipleSelectedDataRows"
                            @bind-MultipleSelectedDataRows="@SelectedProducts"
                            CssClass="mw-1100">
                    <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name"></DxDataGridColumn>
                    <DxDataGridColumn Field="@nameof(ProductFlat.Category)"></DxDataGridColumn>
                    <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)"></DxDataGridColumn>
                </DxDataGrid>
            </div>
        </div>
        <div class="datagrid-selected-items col-md-4 pr-md-0">
            <div class="card mt-3 mt-md-0 h-100">
                <div class="card-header bg-transparent text-body py-1 border-bottom-0 font-weight-bold">Selected products:</div>
                <div class="card-body p-0 overflow-auto">
                    <ul class="list-group list-group-flush bg-transparent border-0">
                        @foreach (var product in SelectedProducts)
                        {
                            <li class="list-group-item bg-transparent text-body py-1 border-0">@product.ProductName</li>
                        }
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <CodeSnippet_Grid_Selection_Multiple />

}

@code {
    IEnumerable<ProductFlat> DataSource;

    IEnumerable<ProductFlat> selectedProducts;
    IEnumerable<ProductFlat> SelectedProducts {
        get { return selectedProducts; }
        set {
            selectedProducts = value;
            InvokeAsync(StateHasChanged);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        DataSource = await FlatProductService.LoadAsync();
        SelectedProducts = DataSource.Take(4).AsEnumerable();
    }
}
